/*
*
* main.css
* CSS stylesheet for the Dragora GNU/Linux-Libre website
* (https://www.dragora.org)
*
*
* Copyright (C)
*   2019, 2020 Matías Fonzo and Michael Siegel
*   2019 Chris F. A. Johnson
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/


/**** RESET ****/

  * {  /* “When in doubt, use brute force.” */
    margin:0;
    border:0;
    padding:0;

    vertical-align:baseline;

    font-size:inherit;
    line-height:1.33em;
  }


/**** STYLE *****/


  /*** Block elements ***/

    body {

      font-family:Helvetica,"Helvetica Neue",DejaVuSans,FreeSans,
        "Nimbus Sans L",sans-serif;
      font-size:16px;

      background-color:#dfd;
/*      background-color:#dfffdd;*/
      background-color:#dfffdc;  /* possibly maybe a tiny bit better */

      color:#000000;
    }


    /** Headings **/

    h1 {
/*      display:none;*/

/*      border:1px solid black;*/
      padding:.67rem 0 .33rem 0;  /* not using margin since element is part of a
                                     floated element */
/*      font-size:2.33rem;*/
      font-size:2.5rem;
/*      font-style:italic;*/

/*      color:#f5f5f5;*/  /* whitesmoke */
/*      color:#fafffa;*/
/*      color:#660066;*/  /* a dark purple */
      color:#005500;
    }

    h2 {
      font-size:1.67rem;

      margin-top:1.5rem;   
      margin-bottom:1.33rem;

      color:#005500;
    }

      h2:first-of-type {  /* It gets padding from .main above that. */
        margin-top:.5rem; /* Consider .67rem. */ 
      }
      
    h3 {
      font-size:1.5rem;

      margin-top:1.33rem;
      margin-bottom:1.17rem;

      color:#005500;
    }

    h4 {
      font-size:1.17rem;

      margin-top:1.17rem;
      margin-bottom:1rem;

      color:#005500;
    }


    /** Paragraphs (incl. quote blocks) **/

    p {
      margin:1em 0;
    }

    blockquote {
      margin:1em 2em;
    }


    /** Lists **/

    dl, ol, ul {
      margin:1em 0;
      padding-left:2em;
    }
    
      /* Switch vertical margins off for nested lists. */
      dl dl, ol ol, ul ul {
        margin:0;      
      }


    /** Tables **/

    table {
/*      width:100%;*/  /* Don't. Margins would be added to that. */
      margin:1em auto;
      margin-left:2em;  /* Define in .main? */
      border:1px solid #999999;
      border-collapse:collapse;
    }

      tbody tr:nth-child(odd) {
        background-color:#ffffcc;
      }
      
      th, td {
        border:1px solid #999999;
        padding:.33em;
      }

      th {
        background-color:#cccccc;
      }


    /** Misc **/
    
    hr {
      margin:.5em auto;
      border: 1px inset;
    }

  /*** Inline elements ***/


    /** Code **/

    code {
      padding:0 .25em;

      font-family:monospace;
      font-weight:bold;
    }


    /** Links **/

    a:link {
      color:#002288;
    /*  color:#002299;*/
    }

    a:visited {
      color:#666666;
    }

/*
    a:focus {}
    a:hover {}
*/

    a:active {
      color:#992200;
    }


  /*** Custom classes ***/

    /** Header **/

    .header {
/*      min-height:8rem;*/
/*      padding:.67rem 0;*/
/*      background-color:#666666;*/
/*      background-color:#660033;*/  /* great, only a little intense */
/*      background-color:#661438;*/
/*      background-color:#73163f;*/
/*      background-color:#731d43;*/
/*      background-color:#80204a;*/
/*      background-color:#6f666d;*/
/*      background-color:#727272;*/
background-color:#bdb;
background-color:#bdb;
    }

      .header img {  /* the logo */
/*        display:none;*/
        float:left;
        
        width:8rem;
        height:8rem;

        margin-top:.67rem;
        margin-left:2rem;
/*        padding:.33rem;*/
/*        border:1px solid #005500;*/
/*        border-radius:50%;*/
        
/*        background-color:#ddffdc;*/
      }

      .header_text {
        max-width:39rem;
/*        display:none;*/
        min-width:21rem;  /* verify this is the correct value */
        margin-left:11.5rem; /* to align with text in .main */
        padding-left:2rem;
        padding-right:2rem;
/*        border:1px solid red;*/
      }

      .tagline {
        margin:0;
/*        padding-bottom:.67rem;*/
        padding-bottom:.83rem;

        font-size:1.17em;
/*        font-style:italic;*/

        color:#333333;
      }


    /** Page wrapper **/ 

    .page_wrapper {
/*      max-width:52.5em;*/
      max-width:53.5em;
      min-width:31.5em;

    /*
     * Rationale:
     * .site_nav_width = 10em
     * .main_margin-left = 10.5em 
     * At 52.5em total, this leaves 42em for .main, which, given all paddings
     * and margins inside .main, leaves room for 72 characters (plus 1em to fake
     * padding-right) per line in code blocks and 80+ in normal text.
     * (The 1px border of code blocks is ignored in this calculation.)
     */

      margin:0 auto;
      margin-left:1em;
/*      margin-top:3rem;*/
      margin-top:2rem;
    }


    /** Torso **/

    .torso {
/*      display:none;*/
      clear:left;
    }


    /** Navigation menu **/

    .site_nav {
/*      display:none;*/
      float:left;
      width:10em;
    }

      .site_nav ul {
        padding:0;
        margin:0;
        list-style-type:none;
      }

        .site_nav ul li {
          margin:0;
          margin-bottom:.25rem;  /* approx. (* 3 (/ 3 12)) */
        }

          .site_nav ul li .site_nav_item {
            border:1px solid #005500;
            border-radius:.33rem;
            padding:.17em .5em;

            background-color: #fafffa;
          }
          /* Rationale for the above: To achieve the wanted styling, there needs
             to be another block-level element inside the li. Applying the style
             to the li directly would lead to sub-items appearing encapsulated
             by their parents, i.e., exactly as they are in the markup.*/

          .site_nav ul ul {
            margin-top:.25em;
          }

            .site_nav ul ul li {  /* Menu items leading to sub-pages. */
            margin-left:1em;
            font-weight:normal;
          }

        .site_nav li.sel {  /* Needs to apply to the div inside the li! */
          background-color:#badfad; /* Just prrof of concept. */
        }
      
      .site_nav a {
        text-decoration:none;

/*        color:#1d6d1d;*/  /* orig */
        color:#004400;
      }

        .site_nav a:hover {
          text-decoration:underline;
        }


    /** Main **/

    .main {
      margin:0;
      margin-left:10.5em; /* site_nav width + .5em gap */
      border:1px solid #005500;
      border-radius:.67rem;
      padding:2em;

      background-color: #fafffa;
    }

      .main p {
        margin-left:1em;
      }
      
        .main p.back_top { 
          margin:0;
          text-align:right;
          font-size:.83em;
        }
        /* A class name of ".back_to_top" will lead to the element being omitted
         when the page is rendered. Investigate. */

      .main blockquote {
        margin-left:3em;
      }

      .main pre {  /* Pre-formatted text, e.g., code blocks. */
        margin:1.5em 0;
        margin-left:1em;
        border:1px solid #999999;
        border-radius:.33em;
        padding:1em;

        overflow:auto;
                
        font-family:monospace;
        font-size:.83em;

        background-color:#ffffcc;
      }

      .main dl, .main ol, .main ul {
        margin-left:1em;
      }
      
        /* Switch that margin off or nested lists. */
        .main dl dl, .main ol ol, .main ul ul {
          margin-left:0;
        }

      .main code {
        color:#005500;
      }
      
    /*
      .main a:link {}
      .main a:visited {}
      .main a:hover {}
      .main a:active {}
    */

      .main a[href^="http://"]:after, .main a[href^="https://"]:after {
        content:url(../img/ext-link.gif);
        opacity:.45;
        padding-left:-.15em;  /* Negative padding is illegal. */
      }

      .main a[href^="dragora.org"]:after {
        content:none;
      }


    /** Footer **/

    .footer_hr {
      /* If CSS-styling is not used, draw a nice hr above the footer. */
      display:none;
    }

    .footer {
      clear:both;

      max-width:50rem;
      min-width:25rem;

/*      margin-top:1.5rem;*/
      /* 
        Can't rely on margin-top here because if .main has a smaller height than
        .nav, the height of .torso will be reduced to the height of .main
        instead of that of .nav since .nav is a floated element.
      */
      margin-bottom:1.5rem;
      margin-left:10.5rem; /* nav + .5em gap */
      padding:0 1rem;
      padding-top:1.5rem;  /* instead of margin-top */

      text-align:center;
/*      font-size:80%;*/
      font-size:.83rem;

      color:#005500;
    }

      .footer p:last-of-type {
        margin-bottom:0;
      }


/**** DEBUG ****/

/*
  .page_wrapper {
    border:2px dashed black;
  }

  h1 {
    background-color:khaki;
  }

  h2 {
    background-color:greenyellow;
  }

  .header {
    background-color:red;
  }

  .subheader {
    background-color: darkcyan;
  }

  .subheader img {
    border:1px solid yellow;
  }

  .tagline {
    background-color:lightsalmon;
  }

  .torso {
    background-color:indigo;
  }

  .nav {
    background-color:firebrick;
  }

  .main p, .main li {
    background-color:#999999;
  }

  .footer {
    background-color:darkseagreen;
  }
*/
